<template>
  <div>
    <el-container>
      <el-header>
        <div style="flex: 0.5"></div>
        <div style="flex: 1">
          <el-button class="custom-button" size="medium" @click.native="$router.push('/userHome')">首页
          </el-button>
        </div>
        <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;margin-right: 70px">
          <el-dropdown placement="bottom">
              <span style="display: flex;align-items: center;cursor: default">
                      <img v-if="user && user.role === '用户'" :src="require('@/assets/用户登录.png')" alt="用户已登录"
                           style="width: 40px;height: 40px;border-radius: 50%;margin: 0 5px">
                      <img v-else :src="require('@/assets/未登录.png')" alt="用户未登录"
                           style="width: 40px;height: 40px;border-radius: 50%;margin: 0 5px">
              </span>
            <el-dropdown-menu slot="dropdown" style="width: 150px">
              <template v-if="user && user.role === '用户'">
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/userHome')">
                  <div style="margin: 5px">首页</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/userSave')">
                  <div style="margin: 5px">我的收藏</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/hotelList')">
                  <div style="margin: 5px">酒店搜索</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/userOrder')">
                  <div style="margin: 5px">我的订单</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/historyOrders')">
                  <div style="margin: 5px">历史订单</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/comment')">
                  <div style="margin: 5px">我的评价</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/points')">
                  <div style="margin: 5px">我的积分</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/pointsActivity')">
                  <div style="margin: 5px">积分活动</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/myCoupon')">
                  <div style="margin: 5px">我的优惠券</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/money')">
                  <div style="margin: 5px">我的钱包</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/userInformation')">
                  <div style="margin: 5px">用户信息</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/safecenter')">
                  <div style="margin: 5px">账户与安全</div>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 15px" @click.native="logout">
                  <div style="margin: 5px">退出登录</div>
                </el-dropdown-item>
              </template>
              <template v-else>
                <el-dropdown-item style="font-size: 15px" @click.native="$router.push('/login')">
                  <div style="margin: 5px">请登录</div>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>


        </div>
      </el-header>

      <el-main style="padding: 0"> <!--main界面-->
        <div>
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'userHome',
  data() {
    return {
      user: {},
    }
  },
  created() {
    const user = localStorage.getItem("user");
    if (user) {
      this.user = JSON.parse(user);
    }
    console.log(user)
  },
  mounted() { //页面加载完之后触发

  },
  methods: {
    logout() {
      this.$router.push('/userHome')
      localStorage.removeItem('user')//清除当前的用户数据
      //刷新界面
      this.$router.go(0); // 刷新页面
    },
  },
}
</script>
<style>
.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}

.search {
  flex: 2;
  position: relative;
  margin: 0 auto;
  min-width: 181px;
  max-width: 500px;
}

.custom-button {
  border: none;
}

.custom-button:hover {
  background-color: #ffffff;
}

.custom-button:active {
  color: #606266;
}

.custom-button:focus:not(:active) {
  background-color: #ffffff; /* 设置鼠标悬停时的背景颜色为白色 */
  color: #606266;
}

.text_color {
  color: #606266
}

.text_color:hover {
  color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
</style>
